<template>
  <div class="hello">
<!--    <div><h2><router-link to="echarts">曲线图</router-link></h2></div>-->
<!--    <div><h2><router-link to="echarts1">柱状图</router-link></h2></div>-->
<!--    <div><h2><router-link to="echarts2">折线图</router-link></h2></div>-->
<!--    <div><h2><router-link to="echarts3">散点图</router-link></h2></div>-->
    <div><h2><router-link to="canvas">canvas</router-link></h2></div>
    {{msg}}
    <div><h2><button @click="get">get</button></h2></div>
    <div>{{getdata}}</div>
    <div><h2><button @click="post">post</button></h2></div>
    <div>{{postresponse}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你好！',
      getdata: '',
      postresponse: ''
    }
  },
  methods: {
    get: function () {
      let url1 = 'http://localhost:8001/getone'
      this.$axios.get(url1).then((resp) => {
        console.log(resp.data)
        this.getdata = resp.data
      }).catch((error) => {
        console.log(error)
      })
    },
    post: function () {
      var num = this.$qs.stringify({'x': '7'})
      let url2 = 'http://localhost:8001/deleteone'
      this.$axios.post(url2, num).then((response) => {
        console.log(response)
        this.postresponse = response.data
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  mounted () {
    // let url1 = 'http://localhost:8001/getone'
    // this.$axios.get(url1).then((resp) => {
    //   console.log(resp.data)
    // }).catch((error) => {
    //   console.log(error)
    // })
    /********************************************************************/
    // 另一种写法，坑我，有问题，行不通。
    // this.$axios({
    //   url: 'http://localhost:8001/getone',
    //   method: 'get' // 默认就是get,这个可以省略，
    //   // params: {
    //   //   key: value
    //   // }
    // }).then((response) => {
    //   console.log(response.data)
    // }).catch((error) => {
    //   console.log(error)
    // })
    /********************************************************************/
    // var num = this.$qs.stringify({'x': '7'})
    // let url2 = 'http://localhost:8001/deleteone'
    // this.$axios.post(url2, num).then((response) => {
    //   console.log(response)
    // }).catch((error) => {
    //   console.log(error)
    // })
    // 可以肯定的是get请求可以成功，而post请求却总是报错，那么就极有可能，axios默认是get请求，
    // 某个设置因此没有设置,当我使用post请求后，该请求没有写，所以造成post失败。
    // 报错提示是跨域问题，但是在处理get请求的时候，我已经配置过跨域了，那么就是post的报头或者
    // 其它什么错误了。
    // let url2 = 'http://localhost:8001/deleteone'
    // this.$axios.post(url2, {
    //   headers: { // 单个请求设置请求头
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //     // 'content-type': 'application/json;charset=UTF-8'
    //   }
    // }).then((response) => {
    //   console.log(response)
    // }).catch((error) => {
    //   console.log(error)
    // })
    /*********************************************************************/
    // 另一种写法，又无效，不过有一点说对了，那就是post请求需要加请求头。
    // 请求头设置在内部
    // this.$axios({
    //   url: 'http://localhost:8001/deleteone',
    //   method: 'post',
    //   headers: { // 单个请求设置请求头
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // })
    //   .then(res => {
    //     console.log(res)
    //   })
    //   .catch(error => {
    //     if (error) {
    //       throw error
    //     }
    //   })
    /*********************************************************************/
  }
  // 此处将axios的get请求挂载在vue的mounted钩子函数下，可以在页面刷新时，看到后端传过来的数据。
  // 接下来将在此使用axios的post请求，将数据发到后端。
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
